<template>
  <div class="t-anl">
    <div class="t-anl-total">
      <data-card class="t-anl-total-item" :value="curCount" :total-value="8779300" title="访问数" tag-label="月" icon-name="visitCount"/>
      <data-card class="t-anl-total-item" :value="curCount" :total-value="8779300" title="访问数" tag-label="月" icon-name="visitCount"/>
      <data-card class="t-anl-total-item" :value="curCount" :total-value="8779300" title="访问数" tag-label="月" icon-name="visitCount"/>
      <data-card class="t-anl-total-item" :value="curCount" :total-value="8779300" title="访问数" tag-label="月" icon-name="visitCount"/>
    </div>
    <div style="margin-top: 16px;">
      <app-flow />
    </div>

  </div>
</template>

<script setup name="analysisIndex">
import DataCard from "@/views/analysis/cards/dataCard.vue";
import AppFlow from "@/views/analysis/cards/appFlow.vue";

const props = defineProps({
  iconName: String
});

const curCount = ref(2788)

// 模拟接口请求
// setInterval(() => {
//   curCount.value = curCount.value + 100;
// }, 5000)

</script>


<style scoped lang="scss">
.t-anl {
  padding: 16px;
  box-sizing: border-box;

  &-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    &-item {
      flex: 1;
      margin-left: 16px;
    }

    &-item:first-child {
      margin-left: 0;
    }
  }

}
</style>
